<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 student-list">
        <div class="main-left2">
          <div class="con2">
            <div class="nav-tit">
              <div class="mright" style="width: 100%">
                <el-input v-model="keyword" style="width: 123px" class="fl search-inp" placeholder="输入名称搜索"></el-input>
                <el-button class="fl" style="height: 40px" @click="getCatList(grades_id, currentPage, 1, keyword)">搜索
                </el-button>
                <el-select style="width: 140px; margin-left: 20px; float: left" :clearable="true" v-model="grades_id"
                  placeholder="请选择" @change="changeClass()">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <div class="btn-area">
                  <el-button class="fl" v-if="isAuth" @click="addInfo()">添加</el-button>
                  <!-- <el-button class="fl" v-if="isAuth" @click="chekcAll()">全选</el-button> -->
                  <el-button class="fl" v-if="isAuth" @click="delInfoAll()">删除</el-button>
                  <el-button class="fl" v-if="isAuth" @click="downloadTemp()">下载模板</el-button>
                  <el-upload class="fl" v-if="isAuth" :file-list="fileList" :show-file-list="false"
                    :on-success="importInfo" :action="url + '/api/common/oss_upload'" multiple :limit="1">
                    <el-button class="fl">一键导入</el-button>
                  </el-upload>
                  <el-button class="fl" v-if="isAuth" @click="exportInfo()">一键导出</el-button>
                  <el-button class="fl" v-if="isAuth" @click="exportInfoAll()">批量导出</el-button>
                </div>
              </div>
            </div>
            <div class="clear"></div>
            <!-- <el-checkbox-group v-model="checkedIds"> -->
            <div class="stu-list" style="width:1240px;">
              <!-- <table cellspacing="0" > -->
              <!-- <table cellspacing="0">
                  <tr>
                    <th width="150">学号</th>
                    <th width="100">姓名</th>
                    <th width="100">性别</th>
                    <th width="200">班级</th>
                    <th width="100">状态</th>
                    <th width="100">家长姓名</th>
                    <th>家长电话</th>
                    <th width="210" v-if="isAuth">操作</th>
                  </tr>

                    <template v-for="(item, i) in listData">
                    <tr :key="i">
                      <td style="text-align: left; padding-left: 20px">
                        <el-checkbox :key="item.id" :label="item.id">
                          {{
                          item.student_no
                          }}
                        </el-checkbox>
                      </td>
                      <td>{{ item.name }}</td>
                      <td>{{ item.sex }}</td>
                      <td>{{ item.grades_name }}</td>

                      <td>{{ item.status }}</td>
                      <td>{{ item.parent_name }}</td>
                      <td>{{ item.parent_phone }}</td>
                      <td v-if="isAuth">
                        <span class="edit" @click="editInfo(item)">修改</span>
                        <span class="del" @click="delInfo(item.id)">删除</span>
                      </td>
                    </tr>
                  </template>
                </table> -->
              <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="width: 1240px;"
                @selection-change="handleSelectionChange" max-height="695" empty-text=""
                :header-cell-style="{background:'#eeeeee'}">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="学号" width="150" prop="student_no"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="sex" label="性别" align="center" width="100">
                </el-table-column>
                <el-table-column prop="grades_name" label="班级" align="center" width="200">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="100">
                </el-table-column>
                <el-table-column prop="parent_name" label="家长姓名" align="center" width="120">
                </el-table-column>
                <el-table-column prop="parent_phone" label="家长电话" align="center" width="140">
                </el-table-column>
                <el-table-column prop="sex" label="操作" align="center">
                  <template slot-scope="scope">
                    <span class="edit" v-if="isAuth" @click="editInfo(scope.row)">修改</span>
                    <span class="del" v-if="isAuth" @click="delInfo(scope.row.id)">删除</span>
                  </template>
                </el-table-column>
                <template slot="empty">
                  <el-empty :image-size="200" v-if="!listData.length"></el-empty>
                </template>
              </el-table>


            </div>
            <!-- </el-checkbox-group> -->
            <div class="page-area" v-if="listData.length > 0">
              <span type="button" class="btn-home fl" style="cursor: pointer" @click="handleCurrentChange(1)">首页</span>
              <el-pagination background layout=" slot,prev, pager, next " :current-page="currentPage" :total="total"
                :page-size="10" @current-change="handleCurrentChange" :page-sizes="[10,20,50,100]"
                >
                <el-select v-model="page_size" @change="handleSizeChange" size="mini" >
                  <el-option v-for="item in [10,20,50,100]" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-pagination>
              <span type="button" style="cursor: pointer" class="btn-last fr"
                @click="handleCurrentChange(last_page)">尾页</span>
            </div>
          </div>
        </div>
        <div class="main-right2">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img">
              <img src="static/img/r-back.png" alt />
            </div>
            <div class="menu-item">返回</div>
          </div>
        </div>
      </div>
    </div>

    <div class="commDig addStuDig" v-if="isAdd == true">
      <div class="title">
        <span>{{ form.id > 0 ? "修改" : "添加" }}</span>
        <span class="closed" @click="isAdd = false">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <ul class="form-area">
          <li>
            <span class="tit-t">
              <label class="red">*</label>学号
            </span>
            <div class="r-text">
              <el-input v-model="form.student_no" placeholder="输入学生的学号"></el-input>
            </div>
          </li>
          <li>
            <span class="tit-t">
              <label class="red">*</label>姓名
            </span>
            <div class="r-text">
              <el-input v-model="form.name" placeholder="输入学生的姓名"></el-input>
            </div>
          </li>
          <li>
            <span class="tit-t">
              <label class="red"></label>性别
            </span>
            <div class="r-text">
              <el-radio-group v-model="form.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </div>
          </li>

          <li>
            <span class="tit-t">
              <label class="red">*</label>班级
            </span>
            <div class="r-text">
              <el-select style="width: 100%" v-model="form.grades_id" placeholder="请选择">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span class="tit-t">
              <label class="red"></label>状态
            </span>
            <div class="r-text">
              <el-select style="width: 100%" v-model="form.status" filterable allow-create default-first-option
                placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span class="tit-t">家长姓名</span>
            <div class="r-text">
              <el-input v-model="form.parent_name" placeholder="输入学生的家长姓名"></el-input>
            </div>
          </li>
          <li>
            <span class="tit-t">家长电话</span>
            <div class="r-text">
              <el-input v-model="form.parent_phone" placeholder="输入学生的家长电话"></el-input>
            </div>
          </li>
        </ul>
      </div>
      <div class="mt30 baseAct width100">
        <button class="cancel" type="info" @click="isAdd = false">取消</button>
        <button @click="handleSubmit()" class="sure">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../../components/header_lecture.vue'

  export default {
    data() {
      return {
        url: this.$brid,
        isAuth: false,
        checkedIds: [],
        listData: [],
        token: localStorage.getItem('token'),
        userInfo: JSON.parse(localStorage.getItem('userInfo')),
        total: 0,
        last_page: 1,
        fileList: [],
        page: 1,
        page_size: 10,
        currentPage: 1,
        grades_id: '',
        keyword: '', //搜索值,
        isAdd: false,
        form: {
          id: '',
          name: '',
          grades_id: '',
          student_no: '',
          sex: '',
          status: '',
          parent_phone: '',
          parent_name: '',
        },
        options: [{
            value: '1',
            label: '在校',
          },
          {
            value: '2',
            label: '毕业',
          },
        ],
        options2: [], //班级列表
        delList: [],
      }
    },
    created() {
      this.getAll()
      this.getClassList()
      if (this.userInfo.auth == 1) {
        this.isAuth = true
      }
      let userAuth = JSON.parse(localStorage.getItem('userAuth'))
      console.log('userAuth==>>')
      console.log(userAuth)
    },
    methods: {
      // handleChange(file, fileList) {
      //   this.fileList = fileList.slice(-3);
      //   console.lo
      // },
      handleSelectionChange(val) {
        this.checkedIds = val
        console.log(val)
        this.checkedIds = []
        val.forEach(element => {
          this.checkedIds.push(element.id)
        });
        this.$forceUpdate()
      },
      handleSizeChange(val) {
        this.page_size = val
        this.handleCurrentChange(1)
      },
      //获取所有学生信息
      getAll() {
        let all_form = {
          grades_id: this.grades_id,
          keyword: this.keyword,
          page: this.page,
          limit: this.page_size,
        }
        this.$api('student.index', all_form).then((res) => {
          this.listData = res.data.data
          this.total = res.data.total
          this.last_page = res.data.last_page
        })
      },
      //获取班级列表
      getClassList() {
        this.$api('student.classlist', {
          token: this.token
        }).then((res) => {
          res.data.forEach((item, index) => {
            var data = {}
            data.value = item.class_id
            data.label = item.grade_text
            this.options2.push(data)
          })
        })
      },
      //筛选班级
      changeClass() {
        this.getAll()
      },
      getCatList(id, index, page = 1, keyword) {
        if (page == 1) {
          this.currentPage = 1
        } else if (page == this.last_page) {
          this.currentPage = this.last_page
        }
        this.page = page
        this.grades_id = id
        this.currentPage = index
        this.keyword = keyword
        let all_form = {
          token: this.token,
          page: this.page,
          limit: this.page_size,
          grades_id: this.grades_id,
          keyword: this.keyword,
        }
        this.$api('student.index', all_form).then((res) => {
          this.listData = res.data.data
          // this.checkedIds = [];
          this.total = res.data.total
          this.last_page = res.last_page
        })
      },
      handleCurrentChange(e) {
        this.checkedIds = []
        this.currentPage = e
        this.getCatList(this.grades_id, this.currentPage, e, this.keyword)
      },
      handleSubmit() {
        let url = this.form.id > 0 ? 'student.editStudent' : 'student.addStudent'
        console.log(this.form.name)
        if (
          this.form.name == '' ||
          this.form.student_no == '' ||
          this.form.grades_id == ''
        ) {
          this.$message({
            message: '学生姓名，学号，班级为必填项',
            type: 'warning',
          })
          return
        }
        if (
          this.form.name == undefined ||
          this.form.student_no == undefined ||
          this.form.grades_id == undefined
        ) {
          this.$message({
            message: '学生姓名，学号，班级为必填项',
            type: 'warning',
          })
          return
        }
        this.$api(url, this.form).then((res) => {
          if (res.code == 1) {
            console.log(res)
            this.$message.success(res.msg)
            this.getAll()
            this.form = {}
            this.isAdd = false
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
        this.isTip = true
      },
      editInfo(item) {
        console.log(item)
        this.form = {
          id: item.id,
          name: item.name,
          grades_id: item.grades_id != null ? item.grades_id.toString() : item.grades_id,
          student_no: item.student_no,
          sex: item.sex == '男' ? '1' : '2',
          status: item.status == '在校' ? '1' : '2',
          parent_phone: item.parent_phone,
          parent_name: item.parent_name,
        }
        this.isAdd = true
      },

      addInfo() {
        this.form = {}
        this.isAdd = true
      },
      // 全选
      chekcAll() {
        this.listData.forEach(element => {
          if (this.checkedIds.indexOf(element.id) == -1) {
            this.checkedIds.push(element.id)
          }
        });
      },
      delInfoAll() {
        this.delInfo(this.checkedIds.join(','))
        // this.getAll()
      },
      delInfo(id) {
        console.log(id == '')
        if (id == '') {
          this.$message({
            message: '未选择删除学生',
            type: 'warning',
          })
        } else {
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
            .then(() => {
              this.$api('student.delStudent', {
                id: id
              }).then((res) => {
                if (res.code == 1) {
                  this.$message.success(res.msg)
                  this.form = {}
                  this.isAdd = false
                  this.getAll()
                } else if (res.code == 0) {
                  this.$message({
                    message: res.msg,
                    type: 'warning',
                  })
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              })
            })
        }
      },
      downloadTemp() {
        this.$api('student.downXls', {
          token: this.token
        }).then((res) => {
          window.open(res.data)
        })
      },
      importInfo(response) {
        var url = response.data.url
        this.$api('student.import', {
          token: this.token,
          file: url
        }).then(
          (res) => {
            this.$message({
              type: 'info',
              message: res.msg,
            })
            this.fileList = []
            this.getAll()
          }
        )
      },
      exportInfo() {
        this.$api('student.export', {
          token: this.token,
          ids: 'all'
        }).then(
          (res) => {
            window.open(res.data)
          }
        )
        // this.$router.push('/space');
      },
      exportInfoAll() {
        if (this.checkedIds.length == 0) {
          this.$message({
            type: 'info',
            message: '请先选择学生再导出',
          })
        } else {
          this.$api('student.export', {
            token: this.token,
            ids: this.checkedIds.toString(),
          }).then((res) => {
            window.open(res.data)
          })
        }
      },
      goLessonsAdd() {
        this.$router.push('/lessonsAdd')
      },
      goLessons() {
        this.$router.push('/lessonsList')
      },
      goRes() {
        this.$router.push('/courseList')
      },
      goBkb2() {
        this.$router.push('/bkblist2')
      },
      goBack() {
        this.$router.go(-1)
      },
      goHome() {
        this.$router.push(localStorage.getItem('jump_path'))
        // this.$router.push('/index');
      },
    },
    components: {
      Header
    },
  }

</script>

<style lang="scss" scoped>
  /deep/ .el-checkbox__label {
    font-size: 16px;
    color: #222222;
  }

  /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #222222;
  }

  .nav-tit .mright {
    display: flex;
    align-items: center;
  }

  .btn-area {
    display: flex;
    align-items: center;
  }

  div.student-list .stu-list {
    height: 700px;
  }

  .stu-list /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  .stu-list /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  }

  .stu-list /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    border-radius: 10px;
  }

  .stu-list /deep/ .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background: none;
  }

</style>
